//api按钮列表数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
// 获取apiList
let  apiList=document.querySelector('.btnList');
console.log(apiList)
apiTypeData.forEach(function(v,i){
    console.log(v.name)
    // if(v.isnew == true){
    //     apiList.innerHTML+=`<a href="" class="bold">${v.name}</a>`

    // }else{
    //     apiList.innerHTML+=`<a href="">${v.name}</a>`

    // }
    apiList.innerHTML += `<a href="" class="${v.isnew? "bold" : ""}">${v.name}</a>`
})
// 获取所有的a标签
let  btnsL=document.querySelectorAll('.btnList a')
let label=document.querySelector('.search')
// // //对搜索框赋予初始值
// label.innerHTML=`<span>${apiTypeData[0].name}</span>
//         <input type="text" placeholder="${apiTypeData[0].keyword}">
//         `

// 绑定事件
btnsL.forEach(function(v,i){
    v.onclick=function(){
        // 一刀切
        btnsL.forEach(function(v2,i2){
            // 清除所有的active类名
            v2.classList.remove('active')
        })
        // 给当前a标签加上active
        v.classList.add('active')
        console.log(apiTypeData[i])
        label.innerHTML=`<span>${apiTypeData[i].name}</span>
        <input type="text" placeholder="${apiTypeData[i].keyword}">
        <img src="../images/magnifier.png" alt="加载失败">`
        // 阻止a标签的默认行为
        return false;
    }
})

// api列表数据
//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]
// 获取所有的li标签
let  listAip=document.querySelector('.apli-k');
console.log(listAip)
// 遍历数组
listDataArr.forEach(function(v,i){
    
    listAip.innerHTML += `
    <li class="list-m">
        ${v.isSpecial ? "<span>企业专用</span>" : ""}
        <a href="../pages/apiDetail.html">
            <img src="../images/${v.img}" alt="">
            <p class="api-name">${v.name}</p>
            <p class="price ${v.price=="免费"?"green":"red"}">
                ${v.price}
            </p>
        </a>
        <button>申请数据</button>
    </li>
    `
})

//先获取页面中所有的button按钮
let btnArr = document.querySelectorAll(".api-list button")
console.log(btnArr)
let mask = document.querySelector(".mask")
// 遍历添加点击事件
btnArr.forEach(function(v,i){
    v.onclick = function(){
        mask.style.display = "block"
    }
})
//当mask发生点击事件时, 隐藏整个模态框
mask.onclick = function(e){
    // mask.style.display = "none"
    console.dir(e.target);  //当前被点击的元素
    //根据当前被点击的元素类名执行不同的代码
    console.log(e.target.classList.contains("mask"))
    if(e.target.classList.contains("mask")){
        mask.style.display = "none"
    }else{
        console.log("不是mask")
    }
}

// 弹出框样式
// 获取登录文字
let account=document.getElementsByClassName('account')[0];
let scan=document.getElementsByClassName('scan')[0];
let tapBt=document.getElementsByClassName('tap-bt')[0];
let scanK=document.getElementsByClassName('scan-k')[0];

console.log(account)
console.log(scan)
//当点击扫码登陆标签时  样式修改  页面隐藏显示处理
scan.onclick=function(){
    account.className='account';
    scan.className='scan active'
    scanK.style.display="block"
    tapBt.style.display="none"

}   
account.onclick=function(){
    account.className='account active';
    scan.className='scan'
    tapBt.style.display="block"
    scanK.style.display="none"

}
//返回顶部
let toTop=document.querySelector('.toTop');
        
toTop.onclick=function(){
    //将滚动条的高度赋值给变量，递减
    let y=window.scrollY;  

    //设置定时器，不断执行滚动条位置
    let timer=setInterval(function(){
        //y不断减少
        y-=100;   
        //滚动到某个位置
        window.scrollTo(0,y);

        //回到顶部，清楚定时器
        if(y<=0){
            clearInterval(timer);
        }
    },20);
}
window.onscroll=function(){
    console.log(window.scrollY)
    if(window.scrollY>=600){
        toTop.style.display='block';
    }else{
        toTop.style.display='none';
    }
}
// 获取关闭按钮
let clearBtn=document.querySelectorAll('.clear')
let inputArr=document.querySelectorAll('form input')
console.log(clearBtn,inputArr)
// 关闭按钮的功能
clearBtn.forEach(function(v,i){
    v.onclick=function(){
        // 清除对应的input值
        inputArr[i].value=""
        // 隐藏自己
        v.style.display="none"
    }
})
// input发生输入事件的时候显示
inputArr.forEach(function(v,i){
    v.oninput=function(){
        if(v.value.length >=1 ){
            clearBtn[i].style.display="block"
        }else{
            clearBtn[i].style.display="none"
        }
    }
})